import React from 'react';
import { Button, Card, Form, Input, message ,Icon} from 'antd';
import FormItem from 'antd/lib/form/FormItem';

class FromLogin extends React.Component {
    handleSubmit=()=>{
        let userInfo = this.props.form.getFieldsValue()
        this.props.form.validateFields((err,values)=>{
            if(!err){
                message.success(`${userInfo.userName}恭喜你注册成功，密码为${userInfo.password}`)
            }
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Card title='登录行内表单'>
                    <Form layout='inline'>
                        <FormItem>
                            <Input placeholder='请输入用户名' />
                        </FormItem>
                        <FormItem>
                            <Input placeholder='请输入密码 ' />
                        </FormItem>
                        <FormItem>
                            <Button type='primary'>登录</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title='登录水平表单' style={{ marginTop: 10 }}>
                    <Form layout='horizontal' style={{ width: 300 }}>
                        <FormItem>
                            {
                                getFieldDecorator('userName', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true, 
                                            message: '用户名不能为空'
                                        },
                                        {
                                            min:5,
                                            max:10,
                                            message:'长度不在范围内'
                                        }
                                    ]
                                })(<Input prefix={<Icon type="user"/>} placeholder='请输入用户名' />)
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('password', {
                                    initialValue: '',
                                    rules: []
                                })(<Input type='password' placeholder='请输入密码 ' />)
                            }
                        </FormItem>
                        <FormItem>
                            <Button type='primary' onClick={this.handleSubmit}>登录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
} 

export default Form.create()(FromLogin)